<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum=1.0,minimum-scale=1.0,user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./05.css">
    <script src=""></script>
</head>

<body>
    <div class="max">
        <div class="top">
            <div class="imglogo">
                <img src="../image/logo.jpg" alt="">
            </div>
            <div class="my">
                <img src="../image/my.jpg" alt="">
                <img src="../image/xiazai.jpg" alt="">
            </div>
        </div>
        <div class="toptext">
            <span>首页</span>
            <span>>北京租房</span>
        </div>
        <!-- 搜索框 -->
        <div class="sou">
            <i class="fang"></i>
            <input class="inp" type="text">
        </div>
        <!-- 区域 -->
        <div class="quyu">

            <select>
                <option value="">区域</option>
                <option value="">区域</option>
                <option value="">区域</option>
            </select>
            <select>
                <option value="">月租</option>
                <option value="">月租</option>
                <option value="">月租</option>
            </select>
            <select>
                <option value="">房型</option>
                <option value="">房型</option>
                <option value="">房型</option>
            </select>
            <select>
                <option value="">更多</option>
                <option value="">更多</option>
                <option value="">更多</option>
            </select>

        </div>
        <!-- 房型样式介绍 -->
        <div class="xiaoqu">
            <div class="fangimg">
                <div class="fangleft">
                    <img src="../image/img1.png" alt="">
                </div>
                <div class="fangright">
                    <span>南沙滩小区</span>
                    <p>2室1厅 96㎡ 南北</p>
                    <p>青岛新天地</p>
                    <div class="green">集中供暖</div>
                    <div class="orange">3700元/月</div>
                </div>

            </div>
            <div class="fangimg">
                <div class="fangleft">
                    <img src="../image/img1.png" alt="">
                </div>
                <div class="fangright">
                    <span>南沙滩小区</span>
                    <p>2室1厅 96㎡ 南北</p>
                    <p>青岛新天地</p>
                    <div class="green">集中供暖</div>
                    <div class="orange">3700元/月</div>
                </div>

            </div>
            <div class="fangimg">
                <div class="fangleft">
                    <img src="../image/img1.png" alt="">
                </div>
                <div class="fangright">
                    <span>南沙滩小区</span>
                    <p>2室1厅 96㎡ 南北</p>
                    <p>青岛新天地</p>
                    <div class="green">集中供暖</div>
                    <div class="orange">3700元/月</div>
                </div>

            </div>

            <div class="fangimg">
                <div class="fangleft">
                    <img src="../image/img1.png" alt="">
                </div>
                <div class="fangright">
                    <span>南沙滩小区</span>
                    <p>2室1厅 96㎡ 南北</p>
                    <p>青岛新天地</p>
                    <div class="green">集中供暖</div>
                    <div class="orange">3700元/月</div>
                </div>

            </div>
        </div>
        <div class="bottom">
            <div class="bot1">
                北京找房无忧>首页
            </div>
            <div class="logo1">
                <img src="../image/apple.png">
                <div>
                    iPhone <br> 客户端
                </div>
            </div>
            <div class="logo1">
                <img src="../image/apple.png">
                <div>
                    iPhone <br> 客户端
                </div>
            </div>
            <p>北京找房无忧房地产经纪公司</p>

            <p>网络经营许可证京ICP备20160812号</p>
        </div>


    </div>
    <script>
        var html = document.getElementsByTagName('html')[0]

        window.onresize = function () {
            //获取屏幕发生改变时的宽度
            winW = document.documentElement.clientWidth
            console.log(winW);
            //拿到设备的宽的 iPhone 6/7/8 的屏幕宽度
            var ui_w = 375
            //用屏幕的宽度除以手机的实际宽度 
            var Pwidth = (winW / ui_w) * 10 + 'px'
            console.log(Pwidth);
            html.style.fontSize = Pwidth
            // son.style.fontSize = Pwidth

        }
    </script>
</body>

</html>